var QueryMaterialTable = function () {
  var template = /*html*/ `
    <div class="query-material-table" v-loading.fullscreen.lock="loading">
      <div>
        <search-btn-view immediate btn-text="查询物料清单" @before-open="resetSearch" :append-to-body="true" @search="searchData">
          <template slot="append">
          <el-button size="medium" type="primary" @click="toAddMaterial">添加物料</el-button>
          </template>
          <div slot="search-content">
            <sys-common-search :search="search" request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:5}"
              :search-field="searchField" label-width="100px" input-width="200px">
            </sys-common-search>
          </div>
        </search-btn-view>
      </div>
      <div class="query-material-table-content" :class="{'hasPage':pagination.totalCount!==0}">
        <el-table fit stripe border :data="materialList" style="width: 100%" height="parent" @row-click="materialRowClick">
          <el-table-column :resizable="false" prop="materialName" label="物料名称" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="model" label="规格" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="providerName" label="供应商" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="color" label="编号" :auto-width="true" min-width="60px"></el-table-column>
          <el-table-column :resizable="false" prop="colorDescription" label="描述" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="materialDeptName" label="物料部门" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="providerNo" label="供方编号" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="unit" label="单位" min-width="60px"></el-table-column>
          <el-table-column :resizable="false" prop="unitPrice" label="单价" min-width="80px"></el-table-column>
        </el-table>
      </div>
      <div style="margin-top:3px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>

      <el-dialog append-to-body title="添加物料" :visible.sync="openDialog" top="10vh" width="60%" @closed="addMaterialData=null">
        <div style="height:calc(80vh - 54px);overflow:auto">
          <company-material-form v-if="openDialog" :company-material="addMaterialData" :dropdown-option="dropdownOption" @add="addMaterialSuccess">
          </company-material-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        colorDescription: '',
        providerName: '',
        providerNo: '',
        materialDept: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        materialList: [],
        openDialog: false,
        addMaterialData: null,
        dropdownOption: {},
        searchField: ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'providerNo', 'materialDept'],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 20
        }
      };
    },

    methods: {
      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var postData = _.cloneDeep(search);
        postData.view = 1;

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData.start = start;
        postData.length = pageSize;

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }
        delete postData.materialDept;

        this.loading = true;
        var self = this;
        return ajaxRequest("basicData/queryMaterialCompany", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;
          for (var i = 0; i < materialList.length; i++) {
            var material = materialList[i];
            var materialDeptId = material.materialDeptId;
            var materialDeptName = material.materialDeptName;
            if (!SysUtil.isEmpty(materialDeptId) && !SysUtil.isEmpty(materialDeptName)) {
              material.materialDept = {
                materialDeptId: materialDeptId,
                materialDeptName: materialDeptName
              };
            } else {
              material.materialDept = '';
            }
          }
          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      materialRowClick: function (row) {
        this.$emit('select-row', row);
      },

      toAddMaterial: function () {
        this.addMaterialData = new CompanyMaterialTable();
        this.openDialog = true;
      },

      addMaterialSuccess: function () {
        this.openDialog = false;
        this.setMaterialList();
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch,
      SearchBtnView: SearchBtnView,
      CompanyMaterialForm: CompanyMaterialForm
    },

    template: template,
  };
}();
